<template>
  <div class="tool">
    <i v-if="loading" class="el-icon-loading loading-icon"></i>
    <template v-if="menuList && menuList.length">
      <div
        class="list"
        v-for="item in menuList"
        :key="item.fullPath"
        @click="goRouter(item)"
      >
        <svg-icon
          :icon-class="item.icon || ''"
          class-name="list-icon"
        ></svg-icon>
        <div>{{ item.name }}</div>
      </div>
    </template>
  </div>
</template>
<script>
import { getUserCommonModules } from "@/api/workbench/index";
import { foreachTreeData } from "@/utils/tree";
import { mapState } from "vuex";
export default {
  props: {
    divHeight: {
      type: [Number, String],
      default: 148,
    },
  },
  data() {
    return {
      loading: false,
      menuList: [],
      list: [
        { moduleRouterName: "任务中心", moduleRouter: "/taskMgmt/center" },
        {
          moduleRouterName: "异常处理",
          moduleRouter: "/exceptionMgmt/operate",
        },
        {
          moduleRouterName: "异常上报",
          moduleRouter: "/exceptionMgmt/reportDistribute/escalation",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      permissRouters: (state) => state.permission.sidebarRouters,
    }),
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      this.loading = true;
      this.menuList = [];
      getUserCommonModules()
        .then((res) => {
          const data = res?.data?.length ? res.data : this.list;
          this.genMenuList(data);
        })
        .catch(() => {
          const data = this.list;

          this.genMenuList(data);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    genMenuList(data) {
      const permissRouters = this.permissRouters;
      // 扁平化与格式化菜单数据
      let menuArr = [];
      foreachTreeData(permissRouters, (node, parent) => {
        const nodePath = node.path || "";

        node.fullPath =
          (parent?.fullPath || "") + (nodePath[0] == "/" ? "" : "/") + nodePath;

        menuArr.push({ ...node, fullPath: node.fullPath });
      });

      // 按照常用功能顺序，查找匹配菜单中的图标，菜单名称，菜单路由
      let moduleRouters = data.map((ele) => ele.moduleRouter);
      let menuList = [];
      menuArr.forEach((ele) => {
        const index = moduleRouters.indexOf(ele.fullPath);
        if (index != -1) {
          menuList[index] = {
            name: ele.meta?.title || "",
            path: ele.path,
            fullPath: ele.fullPath,
            icon: ele.meta?.icon,
          };
        }
      });

      this.menuList = menuList.filter((ele) => !!ele);
    },

    goRouter(item) {
      if (this.$parent.$refs.ball?.dragFlag == true) {
        return;
      }
      this.$emit("showCommonFun");
      this.$router.push({ path: item.fullPath || "./" }).catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.tool {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: #34855b;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(52, 133, 91, 0.4);
  transform: translateX(-50%);
  .loading-icon {
    position: absolute;
    bottom: 0;
  }
  .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    margin: 8px;
    cursor: pointer;
    &:first-child {
      margin-top: 12px;
    }
    &:last-child {
      margin-bottom: 12px;
    }
    &-icon {
      font-size: 20px;
      color: #ffffff;
    }
    div {
      color: #ffffff;
      font-size: 13px;
      margin-top: 4px;
    }
  }
}
</style>
